<!doctype html>
<html lang="zh">

<head>
    <title>{:lang('public.chat')}</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="/static/admin/css/history.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2321976_tf2ed0yzot.css">
</head>
<body>
<div class="chatcontainer">
    <div class="qimo_content mobileChat">
        <div class="m7_content recommend_height" id="wrap">
            <ul class="conversation is_robot" id="histStart" page="1" sw="on">
                <li class="showtime none">
                    <a id="show-more" class="we_im_info">{:lang('public.See_more_news_history')}</a>
                </li>
                <li class="showtime msg"></li>
            </ul>
        </div>
    </div>

</div>
<script type="text/javascript" src="/static/admin/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/admin/js/cookie.min.js"></script>
<script type="text/javascript" src="/static/common/js/common.js"></script>
<script type="text/javascript" src="/static/common/layer35/layer.js"></script>

<script>
    var IM_config = {
        hook:"{:apiUrl('api/Hook/index')}",
    }
$(function () {
    loadMessageHistory('bottom');
    initExport();
    /**
     * 加载更多
     */
    $('.showtime #show-more').click(function() {
        loadMessageHistory('top');
    });

    function initExport(){
        hook('export_records_switch',[],1,function(data){
            if( data !== true )
                return false ;

            if( !$("#export").length ){
                $(".chatcontainer").append('<a href="###" style="position:absolute;bottom:0;left:0;background-color: white;padding:5px 10px;font-size:12px;" id="export">导出记录</a>');
            }
            $("#export").on('click',function(){
                var url = '{:addons_url("exportrecords://Index/export")}' ;
                var downurl = url+'?fromid='+Cookies.get('currentvisiid')+'&toid={$custs["id"]}';
                layer.open({
                    title:'导出聊天记录',
                    type: 2,
                    area: ['400px', '300px'],
                    content:downurl
                });
            })
        });
    }
});


function loadMessageHistory(direction) {
    var hist = $('#histStart');
    var load_page = parseInt(hist.attr('page'));
    var more = $('#show-more').parent();
    if (hist.attr('sw') == 'off') {
        more.html('没有消息了');
        return;
    }

    $.ajax({
        type: "post",
        url: '/api.php/Record/loadMessageHistory.html',
        data: {
            fromid: Cookies.get('currentvisiid'),
            toid: "{$custs['id']}",
            page: load_page
        },
        dataType: "json",
        success: function (r) {
            if (r.code == 200) {
                var message = "";
                more.removeClass('none');
                $.each(r.data, function (index, item) {
                    if (item.utype == 'say_from') {
                        message += '<li class="chatmsg out deal">'+
                            '<div class="user-avatar-left">'+
                                '<img src="' + item.send_avatar + '" />'+
                            '</div>'+
                            '<p class="service-name">' + item.send_nick + '<span class="agentMsgTime">' + getLocalTime(item.send_time) + '</span></p>'+
                            '<div class="outer-left">'+
                                '<div class="service">'+
                                    '<pre class="robot_text_msg">' + item.content + '</pre>'+
                                '</div>'+
                            '</div>'+
                        '</li>';
                    } else {
                        message += '<li class="chatmsg">'+
                            '<p class="customerMsgTime">我</p>'+
                            '<div class="outer-right">'+
                                '<div class="customer">'+
                                    '<pre class="robot_text_msg">' + item.content + '</pre>'+
                                '</div>'+
                            '</div>'+
                            '<div class="user-avatar-right">'+
                                '<img src="' + item.send_avatar + '" />'+
                            '</div>'+
                        '</li>';
                    }
                });
                if (direction == 'bottom') {
                    $('#histStart').append(message);
                    scrollTopfooter();
                } else {
                    more.after(message);
                }
                load_page++;
                hist.attr('page', load_page);
                if (r.data.length < 10) {
                    hist.attr('sw', 'off');
                } else {
                    hist.attr('sw', 'on');
                }

            } else {
                hist.attr('sw', 'off');
            }
        }
    });
}

if (!String.prototype.padStart) {
    String.prototype.padStart = function padStart(targetLength, padString) {
        targetLength = targetLength >> 0; //floor if number or convert non-number to 0;
        padString = String(typeof padString !== 'undefined' ? padString : ' ');
        if (this.length > targetLength) {
            return String(this);
        } else {
            targetLength = targetLength - this.length;
            if (targetLength > padString.length) {
                padString += padString.repeat(targetLength / padString.length); //append to original to ensure we are longer than needed
            }
            return padString.slice(0, targetLength) + String(this);
        }
    };
}

function getLocalTime(time_stamp) {
    const time = new Date(time_stamp * 1000);
    const h = time.getHours().toString().padStart(2, '0')
    const m = time.getMinutes().toString().padStart(2, '0')
    const s = time.getSeconds().toString().padStart(2, '0')
    return h+':'+m+':'+s;
}

function scrollTopfooter() {
    // 到底部
    setTimeout(function() {
        $('#wrap').scrollTop($("#wrap")[0].scrollHeight);
    },100);
}

</script>
</body>
</html>
